<template>
  <a-list item-layout="horizontal" :data-source="data" style="width: 400px;">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta
          :description="item.description"
        >
          <template #title>
            <a>{{ item.title }}</a>
          </template>
          <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" />
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts">
export default {
    name: 'SystemMessage'
}
</script>

<script lang="ts" setup>
import { getSystemMessages } from '@/api/system_message_api'
import { onMounted, ref } from 'vue';

interface DataItem {
  title: string;
  description: string;
}
const data = ref<DataItem[]>([]);

onMounted( async () => {
    await getSystemMessages()
    .then(resp => {
        for (let i = 0; i < resp.data.length; i++) {
            data.value.push({
                title: resp.data[i].gmtCreated,
                description: resp.data[i].message
            })
        }
    })
});
</script>